/**
 * 初始化批注功能
 * 负责设置批注按钮的点击事件，打开批注对话框并处理批注添加操作
 *
 * @param editor 编辑器实例 - 用于访问编辑器核心功能和命令
 */
import { Dialog } from '../../components/dialog/Dialog'

export default function initComment(editor: any): void {
  // 获取批注按钮DOM元素
  const commentDom = document.querySelector<HTMLDivElement>('.menu-item__comment')

  // 检查批注按钮是否存在，避免DOM元素不存在导致的错误
  if (commentDom) {
    debugger
    // 为批注按钮添加点击事件监听
    commentDom.onclick = function () {
      console.log('触发批注功能')
      const range = editor.command.getRange()
      // 检查是否有选中内容，若无则提示用户
      if (!range) {
        alert('请先选择批注位置')
        return
      }
      // 创建并显示批注对话框
      new Dialog({
        title: '添加批注',
        data: [
          {
            type: 'select',
            label: '批注类型',
            name: 'type',
            value: 'normal', // 默认值为普通批注
            required: true,
            options: [
              {
                label: '普通批注',
                value: 'normal'
              },
              {
                label: '问题批注',
                value: 'question'
              },
              {
                label: '建议批注',
                value: 'suggestion'
              }
            ]
          },
          {
            type: 'textarea',
            label: '批注内容',
            name: 'content',
            required: true,
            height: 100,
            placeholder: '请输入批注内容'
          }
        ],

        // 对话框确认按钮点击回调
        onConfirm: payload => {
          // 提取用户选择的批注类型
          const type = payload.find(p => p.name === 'type')?.value
          if (!type) return // 类型验证

          // 提取用户输入的批注内容
          const content = payload.find(p => p.name === 'content')?.value
          if (!content) return // 内容验证

          // 调用编辑器命令添加批注
          editor.command.executeAddComment(range, type, content)
        }
      })
    }
  }
}
